// pages/catName/catName.js
import Toast from '@vant/weapp/toast/toast';
import Notify from '@vant/weapp/notify/notify';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: "",
    nick_name: "",
    color: "",
    character: "",
    appearance: "",
    dataId: null,
    catNameList: [],
    show: false,
    addObj: {
      name: "",
      nick_name: "",
      color: "",
      gender: "",
      condition: "",
      sterilization: "",
      character: "",
      appearance: "",
      location: "三牌楼",
      category: null
    },
    resetAdd: {}, // 用于清空添加的数据
    checkShow: false,
    keyWord: '',  // 用户输入的邀请码
    showPop_gender: false,
    gender_columns: ['母', '公', '未知'],
    condition_columns: ['健康','许久未见','失踪','不明','去喵星啦','送养'],
    sterilization_columns: ['未绝育','已绝育'],
    columns: {
      gender: {
        show: false
      },
      condition: {
        show: false
      },
      sterilization: {
        show: false
      }
    }
  },

  // 关闭校验
  onCloseCheck() {
    this.setData({checkShow: false})
  },

  // 校验点击确定
  checkClick() {
    getApp().globalData.userKey = this.data.keyWord // 存到全局
    if(getApp().globalData.key === getApp().globalData.userKey){
      this.setData({checkShow: false})
      Toast.success('校验成功');
      this.setData({ show: true }); // 打开新增框
    }else{
      Toast.fail('校验失败');
      this.setData({checkShow: true})
    }
  },

  // 打开新增框
  showPopup() {
    if(getApp().globalData.key === getApp().globalData.userKey){
      this.setData({ show: true });
    }else{
      this.setData({checkShow: true})
    }
  },

  // 新增框中选择性别
  onConfirmGender(event) {
    const { picker, value, index } = event.detail;
    const gender = "addObj.gender"
    this.setData({ [gender]: value });
    // 关闭新增框
    this.setData({ ["columns.gender.show"]: false });
  },

    // 新增框中选择状况
    onConfirmCondition(event) {
      const { picker, value, index } = event.detail;
      const condition = "addObj.condition"
      this.setData({ [condition]: value });
      // 关闭新增框
      this.setData({ ["columns.condition.show"]: false });
    },

    // 新增框中选择绝育
    onConfirmSterilization(event) {
      const { picker, value, index } = event.detail;
      const sterilization = "addObj.sterilization"
      this.setData({ [sterilization]: value });
      // 关闭新增框
      this.setData({ ["columns.sterilization.show"]: false });
    },

  // 打开性别选择框
  genderClick(e) {
    this.setData({ ["columns.gender.show"]: true });
  },

    // 打开状况选择框
    conditionClick(e) {
      this.setData({ ["columns.condition.show"]: true });
    },

    // 打开绝育选择框
    sterilizationClick(e) {
      this.setData({ ["columns.sterilization.show"]: true });
    },


  // 关闭新增框
  onClose() {
    this.setData({ show: false });
  },

  // 关闭选择框
  cancelCondition() {
    this.setData({ ["columns.condition.show"]: false });
  },
  cancelSterilization() {
    this.setData({ ["columns.sterilization.show"]: false });
  },
  cancelGender(){
    this.setData({ ["columns.gender.show"]: false });
  },

        // 通过分类获取猫咪名称列表
        async getName(id){
          await wx.cloud.callContainer({
            config: {
              env: 'njuptcats-3gfex5t8ab342406',
            },
            // 请求路径
            path: `/categories/${id}`,
            // 请求 HTTP 方法
            // method: 'GET',
            // 请求 Body
            // data: {
            //   id: 1
            // },
            header: {
              'X-WX-SERVICE': 'njuptcatsflask', // 填入服务名称（微信云托管 - 服务管理 - 服务列表 - 服务名称）
            },
            // 指定请求响应为 json，如不是可改为 text
            dataType: 'json',
            // 指定回包返回文本，可选改为 arraybuffer
            // responseType: 'text',
            success: res => {
              this.setData({catNameList: res.data.data})
              // console.log(this.data.catNameList)
            }
          })
        },

          // 添加猫咪
          async postCat(){
            const that = this
            await wx.cloud.callContainer({
              config: {
                env: 'njuptcats-3gfex5t8ab342406',
              },
              // 请求路径
              path: `/cats`,
              // 请求 HTTP 方法
              method: 'POST',
              // 请求 Body
              data: {
                data: this.data.addObj
              },
              header: {
                'X-WX-SERVICE': 'njuptcatsflask', // 填入服务名称（微信云托管 - 服务管理 - 服务列表 - 服务名称）
              },
              // 指定请求响应为 json，如不是可改为 text
              dataType: 'json',
              // 指定回包返回文本，可选改为 arraybuffer
              // responseType: 'text',
              success: res => {
                // this.setData({catNameList: res.data.data})
                // console.log(res)
                that.setData({ show: false });
                that.getName(that.data.dataId)
                Toast.success('添加成功');
                console.log(that.data.resetAdd)
                that.setData({addObj: that.data.resetAdd})
              }
            })
          },

  // 添加按钮
  addClick() {

    this.setData({ ["addObj.name"]: this.data.name });
    this.setData({ ["addObj.nick_name"]: this.data.nick_name });
    this.setData({ ["addObj.color"]: this.data.color });
    this.setData({ ["addObj.character"]: this.data.character });
    this.setData({ ["addObj.appearance"]: this.data.appearance });

    // 校验
    if(!this.data.addObj.name){
      Toast('请输入猫咪名称~');
      return
    };
    if(!this.data.addObj.gender){
      Toast('请选择猫咪性别~');
      return
    }

    let id = Number(this.data.dataId)
    this.setData({ ["addObj.category"]: id });
    // console.log({data: this.data.addObj})

    // 发送post请求
    this.postCat()
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    this.setData({resetAdd: JSON.parse(JSON.stringify(this.data.addObj))})
    
    this.setData({
      dataId: options.dataId
    })
    const id = this.data.dataId

    this.getName(id)

    Notify({
      message: '点击猫咪名称，查看详情呦~',
      color: 'white',
      background: 'orange',
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})